import UserSession from "@/UserSession";
import { formDictionaryDelete, formDictionaryList } from "@/services/formInteraction";
import { Button, Col, Form, Input, Modal, Row, Select, Table, message } from "antd";
import moment from "moment";
import React from "react";

class Dictionary extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      current:1,
      size:10,
      total:0,
      list:[],
      loading:false
    }
  }

  componentDidMount(){
    this.getList()
  }

  getList = () => {
    this.setState({
      loading:true
    },async () => {
      const { current,size } = this.state;
      const { form:{getFieldsValue},location:{query:{id}} } = this.props
      const res = await formDictionaryList({
        current,size,...getFieldsValue(),formId:id
      })
      this.setState({
        loading:false,
        total:res.total,
        list:res.records ? res.records : []
      })
    })
  }

  doQuery = (current,size) => {
    this.setState({
      current,size
    },() => {
      this.getList()
    })
  }

  toDictionaryEdit = dictionaryId => {
    const { match: { url, params: { id }, }, location: { pathname, query }, children, route ,history} = this.props;
    let rootRouter = UserSession.isSystemKnowledge() ? 'systemKnowledge' : 'myKnowledge'
    let path =  "/knowledgeDesign/"+rootRouter+"/" + id + "/formInteraction/edit/dictionaryEdit"
    let params = query;
    if(id){
      params.dictionaryId = dictionaryId
    }
    history.push({ pathname: path,query:params })
  }

  removeConfirm = id => {
    Modal.confirm({
      title:"确认删除该字典？",
      okText:"确定",
      cancelText:"取消",
      okType:"danger",
      onOk:() => {
        this.doRemove(id)
      }
    })
  }

  doRemove = async id => {
    const res = await formDictionaryDelete({id})
    message.info(res.message)
    this.getList()
  }

  render(){
    const { form:{ getFieldDecorator } } = this.props;
    const { current,size,total,loading,list } = this.state;
    const columns = [
      {
        title:"序号",
        dataIndex:"index",
        width:80,
        render:(text,row,index) => {
          return (current - 1) * size + (index + 1)
        }
      },
      {
        title:"字典名称",
        dataIndex:"name",
        width:200,
      },
      {
        title:"数据名称",
        dataIndex:"columnList",
        width:300,
        render:list => {
          let listString = list ? list.toString() : ''
          return listString
        }
      },
      {
        title:"创建人",
        dataIndex:"createUser",
        width:150,
      },
      {
        title:"更新时间",
        dataIndex:"updateTime",
        width:150,
        render:time => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : ''
        }
      },
      {
        title:"操作",
        width:200,
        render:(text,row,index) => {
          return (
            <div>
              <Button icon="edit" type="primary" size="small" style={{marginRight:10}} onClick={() => this.toDictionaryEdit(row.id)}>编辑</Button>
              <Button icon="delete" type="danger" size="small" onClick={() => this.removeConfirm(row.id)}>删除</Button>
            </div>
          )
        }
      }
    ]
    return(
      <div>
        <Form layout="inline">
          <Row>
            <Col span={10}>
              <Form.Item>
                {
                  getFieldDecorator("search")(
                    <Input.Search placeholder="请输入字典名称" style={{width:300}} onSearch={() => this.doQuery(1,size)} />
                  )
                }
              </Form.Item>
            </Col>
            <Col span={14} style={{textAlign:'right'}}>
              <Form.Item>
                {
                  getFieldDecorator("type",{initialValue:0})(
                    <Select placeholder="请输入排序方式" style={{width:150}} onChange={() => this.doQuery(1,size)}>
                      <Select.Option value={0}>按更新时间升序</Select.Option>
                      <Select.Option value={1}>按更新时间降序</Select.Option>
                    </Select>
                  )
                }
              </Form.Item>
              <Form.Item>
                <Button type="primary" onClick={() => this.toDictionaryEdit()}>创建字典</Button>
              </Form.Item>
            </Col>
          </Row>

          <Row style={{marginTop:24}}>
            <Col span={24}>
              <Table 
                columns={columns}
                dataSource={list}
                loading={loading}
                rowKey={'id'}
                scroll={{x:"auto"}}
                pagination={{
                  current,
                  pageSize:size,
                  total,
                  showQuickJumper:true,
                  showSizeChanger:true,
                  onChange:this.doQuery,
                  onShowSizeChange:this.doQuery
                }}
              />
            </Col>
          </Row>
        </Form>
      </div>
    )
  }
}

export default Form.create()(Dictionary)